<template>
  <div style="width: 100%">
    <div class="top-banner" :style="{ height: bannerHeight + 'px' }">
      <div class="TopTip" id="TopTip">
        <img src="@/assets/image/msg.jpg" alt="" @click="$tool.goLinePage()"/>
        <van-icon name="close" size="20" @click="closebanner" />
      </div>
    </div>
    <div class="search-box">
      <a href="javascript:;" @click="pcGoPage('/home')"
        ><img class="logo" src="@/assets/image/logo.png" alt=""
      /></a>
      <el-input
        :placeholder="
          $i18n.locale == 'en-US' ? 'Enter keywords' : 'キーワードを入力'
        "
        v-model="searchValue"
        class="input-with-select"
      >
        <el-select
          @change="elOption(selectValue)"
          v-model="selectValue"
          slot="prepend"
          placeholder="请选择"
          style="width: 8.5rem"
        >
          <el-option
            :label="$i18n.locale == 'en-US' ? item.nameEn : item.nameZh"
            :value="item.id"
            v-for="item in shopNavList"
            :key="item.id"
          ></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchHandler(searchValue)"
        ></el-button>
      </el-input>

      <img
        class="language"
        @click="changeLang"
        v-show="$i18n.locale == 'en-US'"
        src="../../assets/image/usa.svg"
        alt=""
      />
      <img
        class="language"
        @click="changeLang"
        v-show="$i18n.locale == 'jp-JP'"
        src="../../assets/image/jp.svg"
        alt=""
      />
      <div class="user-info-box">
        <template v-if="$store.state.isLogin">
          <el-tooltip placement="bottom" effect="light">
            <ul class="mainPage_pc_infoListBox_3K0Kp" slot="content">
              <li
                @click="pcGoPage('/profile')"
                class="mainPage_pc_infoListBoxItem_VFz3I"
              >
                {{ $t("profile.Me") }}
              </li>
              <li
                @click="pcGoPage('/application')"
                class="mainPage_pc_infoListBoxItem_VFz3I"
              >
                {{ $t("profile.Cart") }}:0
              </li>
              <li
                @click="pcGoPage('/balance')"
                class="mainPage_pc_infoListBoxItem_VFz3I"
              >
                {{ $t("profile.Balance") }}:￥500
              </li>
              <li
                @click="pcGoPage('/rewardPoints')"
                class="mainPage_pc_infoListBoxItem_VFz3I"
              >
                {{ $t("profile.PointsBalance") }} 0
              </li>
              <li
                @click="pcGoPage('/accountSettings')"
                class="mainPage_pc_infoListBoxItem_VFz3I"
              >
                {{ $t("profile.Account") }}
              </li>
              <li
                @click="pcGoPage('/referral')"
                class="mainPage_pc_infoListBoxItem_VFz3I"
              >
                {{ $t("profile.Friend") }}
              </li>
              <li @click="signOut()" class="mainPage_pc_infoListBoxItem_VFz3I">
                {{ $t("profile.Out") }}
              </li>
              <li
                @click="pcGoPage('/help')"
                class="mainPage_pc_infoListBoxItem_VFz3I"
              >
                {{ $t("profile.help") }}
              </li>
            </ul>
            <span
              >{{ $store.state.userinfo.nickname }}
              <van-icon name="play" style="transform: rotate(90deg)" />
            </span>
          </el-tooltip>
        </template>
        <template v-else>
          <span @click.stop="pcGoPage('/login')">{{
            $t("home.SingUp")
          }}</span>
          <span>|</span>
          <span @click.stop="pcGoPage('/signUp')">{{ $t("home.SignIn") }}</span>
        </template>
      </div>
    </div>
    <div class="navbar-box">
      <div class="navbar-content">
        <div
          class="navbar-item"
          @mouseover="showDepartment = true"
          @mouseout="showDepartment = false"
        >
          <span>{{ $t("profile.Department") }}</span>
          <div class="nav-list" v-show="showDepartment">
            <div
              class="nav-list-item"
              v-for="item in shopNavList"
              :key="item.id"
              @click="goShopPage(item)"
            >
              <img
                class="nav-list-item-icon"
                :src="'https://mottecommerce.com/' + item.icon"
                alt=""
              />
              {{ $i18n.locale == "en-US" ? item.nameEn : item.nameZh }}
            </div>
          </div>
        </div>
        <div @click="pcGoPage('/application')" class="navbar-item">
          {{ $t("profile.MyApp") }}
        </div>
        <div @click="pcGoPage('/referral')" class="navbar-item">
          {{ $t("profile.ReferaFriend") }}
        </div>
        <div
          class="navbar-item"
          @mouseover="showHelp = true"
          @mouseout="showHelp = false"
        >
          <span>{{ $t("profile.help") }}</span>
          <div v-show="showHelp" class="nav-list">
            <div @click="pcGoPage('/fag')" class="nav-list-item">
              {{ $t("profile.FAQ") }}
            </div>
            <div @click="pcGoPage('/help')" class="nav-list-item">
              {{ $t("profile.UserGuide") }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 。。。。。。。。。。。。。。。。。移动端 。。。。。。。。。。。。。。。。。。。-->
    <div class="navbar-phone">
      <div class="navbar-phone-content" @click="cancelDisplay">
        <div class="fold-box" @click.stop="showLeftPopup = true">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <img class="logo" src="@/assets/image/logo.png" alt="" />
        <div class="icon-box">
          <van-icon
            color="#ff5900"
            size="20"
            name="search"
            @click.stop="showSeatch = !showSeatch"
          ></van-icon>
          <van-icon
            color="#ff5900"
            size="20"
            name="question-o"
            @click.stop="showHelpBox = true"
          ></van-icon>
        </div>
        <div
          class="searchBox"
          :class="showSeatch && 'showSeatchBox'"
          @click.stop="NoOperation"
        >
          <van-search
            background="#ff5900"
            v-model="searchValue"
            :placeholder="
              $i18n.locale == 'en-US' ? 'Enter keywords' : 'キーワードを入力'
            "
            @search="searchHandler"
          />
        </div>
      </div>
    </div>
    <van-popup
      class="sideBar-containers"
      v-model="showLeftPopup"
      position="left"
      :style="{ width: '70%', height: '100%' }"
      closeable
    >
      <template v-if="$store.state.isLogin">
        <div class="userinfo-box">
          <van-image
            src=""
            width="2rem"
            height="2rem"
            round
            loading-icon="contact"
            error-icon="contact"
          >
          </van-image>
          <span class="username"> {{ $store.state.userinfo.nickname }}</span>
        </div>
      </template>
      <template v-else>
        <div class="userinfo-box" @click="leftPopupGoPage('/login')">
          <van-image
            src=""
            width="2rem"
            height="2rem"
            round
            loading-icon="contact"
            error-icon="contact"
          >
          </van-image>
          <span class="username"> {{ $t("common.Sign") }}</span>
        </div>
      </template>
      <template v-if="showSideBarBoxData == 0">
        <div class="sideBar-box">
          <div class="sideBar-box-item" @click="leftPopupGoPage('/home')">
            {{ $t("common.Home") }}
          </div>
          <div
            class="sideBar-box-item"
            @click="changeSideBarBoxData('Category')"
          >
            {{ $t("common.Category") }}
            <van-icon name="arrow" />
          </div>
          <div
            class="sideBar-box-item"
            @click="leftPopupGoPage('/application')"
          >
            {{ $t("common.MyCart") }}
          </div>
          <div class="sideBar-box-item" @click="leftPopupGoPage('/balance')">
            {{ $t("common.CashBackBalance") }}
          </div>
          <div class="division"></div>
        </div>
        <div class="sideBar-box">
          <div class="sideBar-box-item" @click="leftPopupGoPage('/referral')">
            {{ $t("common.RefertoEarn") }} ￥500
          </div>
          <div class="sideBar-box-item" @click="leftPopupGoPage('/help')">
            {{ $t("common.Help") }}
          </div>
          <div class="division"></div>
          <div
            class="sideBar-box-item"
            @click="changeSideBarBoxData('Settings')"
          >
            {{ $t("common.Settings") }}
            <span style="display: flex; align-items: center">
              <img
                v-if="$i18n.locale == 'en-US'"
                src="../../assets/image/usa.svg"
                alt=""
              />
              <img v-else src="../../assets/image/jp.svg" alt="" />
              <van-icon name="arrow" style="margin-left: 10px" />
            </span>
          </div>
        </div>
      </template>
      <template v-if="showSideBarBoxData == 1">
        <div class="sideBar-box">
          <div
            class="sideBar-box-item sideBar-box-go-main"
            @click="showSideBarBoxData = 0"
          >
            <van-icon name="arrow-left" />{{ $t("common.MainMenu") }}
          </div>
          <div class="sideBar-box-item sideBar-box-title">
            {{ $t("common.Category") }}
          </div>
          <div
            class="sideBar-box-item sideBar-box-go-main"
            @click="goShopPage(item)"
            v-for="item in shopNavList"
            :key="item.id"
          >
            <img
              class="icon"
              :src="'https://mottecommerce.com/' + item.icon"
              alt=""
            />
            {{ $i18n.locale == "en-US" ? item.nameEn : item.nameZh }}
          </div>
          <div class="division"></div>
        </div>
      </template>
      <template v-if="showSideBarBoxData == 2">
        <div class="sideBar-box">
          <div
            class="sideBar-box-item sideBar-box-go-main"
            @click="showSideBarBoxData = 0"
          >
            <van-icon name="arrow-left" />{{ $t("common.MainMenu") }}
          </div>
          <div class="sideBar-box-item sideBar-box-title">
            {{ $t("common.Settings") }}
          </div>
          <div
            class="sideBar-box-item sideBar-box-img"
            :class="$i18n.locale == 'en-US' && 'sideBar-box-item-active'"
            @click="bychangeLang('en-US')"
          >
            <img src="../../assets/image/usa.svg" alt="" />
            {{ $t("common.UnitedStates") }}
          </div>
          <div
            class="sideBar-box-item sideBar-box-img"
            :class="$i18n.locale == 'jp-JP' && 'sideBar-box-item-active'"
            @click="bychangeLang('jp-JP')"
          >
            <img src="../../assets/image/jp.svg" alt="" />
            {{ $t("common.JapaneseStates") }}
          </div>
          <div class="division"></div>
          <div
            class="sideBar-box-item sideBar-box-img"
            @click="leftPopupGoPage('/accountSettings')"
          >
            <van-icon
              name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
              size="22px"
            />
            {{ $t("common.Profile") }}
          </div>
          <div class="division" style="padding: 0.8rem 0" @click="signOut()">
            {{ $t("profile.Out") }}
          </div>
        </div>
      </template>
    </van-popup>
    <van-popup class="helpBoxPopup" round v-model="showHelpBox">
      <div style="padding-bottom: 15%; box-sizing: border-box">
        <div style="position: relative">
          <img src="../../assets/image/headerStep.png" alt="" />
          <div class="helpbox-btn">
            <span
              class="sign"
              @click="pcGoPage('/login'), (showHelpBox = false)"
              >{{ $t("common.Signin") }}</span
            >
            <span
              class="faq"
              @click="pcGoPage('/help'), (showHelpBox = false)"
              >{{ $t("common.FAQ") }}</span
            >
          </div>
        </div>
        <div class="van-icon" @click="showHelpBox = false">
          <van-icon class="" name="close" color="#fff" size="2rem" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerHeight: 0,
      bannerTime: null,
      userId: "",

      showDepartment: false,
      showHelp: false,
      searchValue: "",
      selectValue: "All",
      categoryList: [""],
      shopNavList: [],
      // 搜索选项框对应的id码
      searchOptionsID: null,

      // 移动端
      showLeftPopup: false,
      showSeatch: false,
      searchValue: "",
      showHelpBox: false,
      // LeftPopup
      showSideBarBoxData: 0,
      showUserMarp: true,
    };
  },
  created() {
    this.getClassification();
  },
  beforeDestroy() {
    clearInterval(this.bannerTime);
  },
  mounted() {
    setTimeout(() => {
      var TopTip = document.querySelector("#TopTip");
      this.bannerTime = setInterval(() => {
        if (!TopTip.clientHeight) {
          clearInterval(this.bannerTime);
        }
        if (this.bannerHeight >= TopTip.clientHeight) {
          clearInterval(this.bannerTime);
          this.bannerTime = null;
        }
        document.body.scrollTop = 0;
        this.bannerHeight += 1;
      }, 10);
    }, 500);
  },
  methods: {
    getClassification() {
      this.$axios({
        url: "/index/productCategory/search",
        method: "get",
      }).then((res) => {
        this.shopNavList = res.data;
        this.shopNavList.unshift({
          nameZh: "ぜんよう",
          nameEn: "All",
          id: 0,
          icon: "uploads/202012/14/all.png",
        });
      });
    },
    changeSideBarBoxData(val) {
      switch (val) {
        case "Category":
          this.showSideBarBoxData = 1;
          break;
        case "Settings":
          this.showSideBarBoxData = 2;
          break;
      }
    },
    signOut() {
      this.showToast("Exit success", "終了に成功しました");
      this.$store.commit("SIGN_OUT");
      setTimeout(() => {
        this.$router.replace("/home");
      }, 1000);
      this.showLeftPopup = false;
      console.log("退出登录");
    },
    bychangeLang(val) {
      this.$i18n.locale = val;
      this.showLeftPopup = false;
      console.log(this.$i18n.locale);
    },
    changeLang() {
      if (this.$i18n.locale == "jp-JP") {
        this.$i18n.locale = "en-US";
      } else {
        this.$i18n.locale = "jp-JP";
      }
    },
    pcGoPage(url) {
      this.$router.push(url);
    },
    leftPopupGoPage(url) {
      this.$router.push(url);
      this.showLeftPopup = false;
    },
    goShopPage(item) {
      let id = item.id;
      this.$router.push(`/shop?genrgId=${id}`);
      this.showLeftPopup = false;
      this.$loading();

      this.$bus.emit("getGoodslist", id);
    },
    closebanner() {
      var timer = setInterval(() => {
        if (this.bannerHeight <= 0) {
          clearInterval(timer);
          timer = null;
        }
        document.body.scrollTop = 0;
        this.bannerHeight -= 1;
      }, 10);
    },
    cancelDisplay() {
      this.showSeatch = false;
    },

    // 搜索事件
    searchHandler(value) {
      console.log("搜索", value);
      this.$router.push("/shop");
      setTimeout(() => {
        this.$bus.emit("searchShopChange", {
          categoryId: this.searchOptionsID, //选项卡搜索id
          title: value,
        });
      }, 200);

      // this.showSeatch = false
      // this.searchValue = ''
    },

    // 搜索选项事件
    elOption(index) {
      this.searchOptionsID = index;
      console.log(this.searchOptionsID);
    },

    NoOperation() {},
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.mainPage_pc_infoListBox_3K0Kp {
  color: #333;
  font-size: 13px;
  width: 167px;

  .mainPage_pc_infoListBoxItem_VFz3I {
    padding: 5px 10px;
    cursor: pointer;

    &:hover {
      color: #ff5900;
    }
  }
}

.helpBoxPopup {
  background-color: transparent;

  .van-icon {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  img {
    width: 16rem;
  }

  .helpbox-btn {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    display: flex;
    justify-content: space-around;

    span {
      height: 1.5rem;
      background: #ff5900;
      display: inline-block;
      color: #fff;
      line-height: 1.5rem;
      text-align: center;
      font-size: 14px;
      padding: 0 0.6rem;
    }

    .faq {
      background: #ffaf5b;
    }
  }
}

.sideBar-containers {
  .userinfo-box {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.7rem;
    color: #222;
    padding: 0.75rem;
    border-bottom: 1px solid #ddd;

    .username {
      color: #222;
      font-size: 0.75rem;
      font-weight: 700;
      margin-left: 0.5rem;
    }
  }
}

.sideBar-box {
  box-sizing: border-box;

  .sideBar-box-title {
    font-weight: bold;
  }

  .division {
    background-color: #f5f5f5;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 14px;
    text-align: center;
  }

  .sideBar-box-item {
    font-size: 0.7rem;
    color: #222;
    padding: 0.75rem 0.6rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      width: 0.8rem;
      height: 0.8rem;
    }
  }

  .sideBar-box-item-active {
    color: #f76110;
  }

  .sideBar-box-go-main,
  .sideBar-box-img {
    justify-content: flex-start;

    img {
      margin-right: 10px;
    }
  }
}

.navbar-phone {
  width: 100%;
  height: 2.5rem;
  border-bottom: 0.05rem solid #eee;
  display: none;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  position: relative;

  @media screen and (max-width: 900px) {
    display: flex;
  }

  .searchBox {
    position: fixed;
    top: 5rem;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.5s ease;
    transform: scale(0);
    opacity: 0;
  }

  .showSeatchBox {
    opacity: 1;
    transform: scale(1);
  }

  .navbar-phone-content {
    display: flex;
    padding: 0 0.3rem;
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    justify-content: space-between;

    .logo {
      width: 7rem;
      vertical-align: middle;
      padding-left: 0;
      margin-right: 3rem;
      position: absolute;
      left: 2.5rem;
    }
  }

  .icon-box {
    & > i {
      margin-right: 10px;
    }
  }

  .fold-box {
    width: 1.2rem;
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 1rem;

    span {
      margin-top: 0.2rem;
      display: block;
      background: #ff5900;
      width: 1rem;
      height: 2px;
      transition: all 0.35s ease;
    }
  }
}

.navbar-box {
  border-top: 1px solid #ccc;
  position: relative;
  z-index: 999;
  min-width: 1400px;

  @media screen and (max-width: 900px) {
    display: none;
  }

  .navbar-content {
    cursor: pointer;
    height: 50px;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    font-size: 16px;
    text-align: center;
    line-height: 50px;

    .navbar-item {
      flex: 1;
      position: relative;

      &:hover {
        background-color: #ff5900;
      }

      &:first-child {
        flex: 0;
        flex-basis: 298px;
      }

      &:last-child {
        flex: 0;
        flex-basis: 298px;
      }
    }
  }

  .nav-list {
    max-height: 300px;
    overflow-y: scroll;
    background-color: #fff;

    .nav-list-item {
      height: 50px;
      font-size: 16px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;

      &:hover {
        color: #ff5900;
      }
    }

    .nav-list-item-icon {
      width: 1rem;
      height: 1rem;
      object-fit: contain;
      vertical-align: middle;
    }

    &::after {
      content: "";
      width: 16px;
      height: 16px;
      position: absolute;
      z-index: 1000;
      bottom: -8px;
      margin: auto;
      background: #ff5900;
      transform: rotate(45deg);
    }
  }
}

/* ------------------------------------pc端--------------------------------- */
.search-box {
  width: 1400px;
  min-width: 1400px;
  margin: 0 auto;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;

  @media screen and (max-width: 900px) {
    display: none;
  }

  .logo {
    width: 220px;
  }

  .input-with-select {
    width: 630px !important;
    height: 38px;
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .language {
    width: 40px;
    height: 25px;
  }

  .user-info-box {
    span {
      cursor: pointer;
    }

    span:nth-child(2) {
      margin: 0 10px;
      cursor: auto;
    }
  }
}

.top-banner {
  height: 0;
  text-align: center;
  background-color: #ffae4b;
  overflow: hidden;
  position: relative;
  min-width: 1400px;

  @media screen and (max-width: 900px) {
    min-width: 100%;
  }

  .TopTip {
    height: 119px;

    @media screen and (max-width: 900px) {
      height: 49px;
    }
  }

  img {
    height: 100%;

    @media screen and (max-width: 900px) {
      max-width: 100%;
    }
  }

  i {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  @media screen and (max-width: 900px) {
    height: 49px;
  }
}
</style>
